<template>
  <view class="fuqin">
    <view class="ezi">
      <text @tap="xuanzhe('zhudon')">{{ zhudon[index1] }}</text>
      <text class="icon iconfont icon-qiehuan" @tap="qiehuan"></text>
      <text @tap="xuanzhe('beidon')">{{ beidon[index2] }}</text>
    </view>
  </view>
  <view v-if="!xuanzyuyan">
    <view class="result-card">
      <view class="title">内容</view>

      <!-- 文本域 -->
      <textarea
        v-model="neiron"
        placeholder="请在这里输入翻译的内容~"
        confirm-type="search"
        style="height: 300rpx; width: 100%"
      />
      <view v-if="neiron" @tap="search">
        <text class="icon iconfont icon-fenxiang search11"></text>
      </view>
    </view>
    <scroll-view scroll-y>
      <view class="result-card">
        <view class="title">翻译结果</view>
        <view class="fyi11">
          <view style="margin-bottom: 40rpx">
            <text style="margin-bottom: 20rpx">网络全义：</text>
            <view class="quanbu">
              <text
                v-for="(item, index) in answer1"
                :key="index"
                class="wangyiquanyi"
              >{{ index + 1 }}、{{ item }}</text>
            </view>
          </view>
        </view>
        <view style="margin-top: 60rpx">
          <text>具体翻译：</text>
          <view style="margin-top: 30rpx; margin-left: 20rpx">{{ answer }}</view>
        </view>

        <view style="margin-top: 120rpx">
          <text style="margin-bottom: 50rpx">拓展语句：</text>
          <view v-for="(item, index) in web" :key="index">
            <text style="margin: 50rpx" class="tuozzi">{{ item.key }}</text>
            <view
              v-for="(item1, index1) in item.value"
              :key="index1"
              class="wangyiquanyi"
            >{{ index1 + 1 }}、{{ item1 }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view v-else class="qiehuanyans">
    <view v-for="(item, index) in beidon1" :key="index" class="ziti">
      <text @tap="xuanzhehao(index)">{{ item }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import SHA256 from '../../utils/util/sha256'
const xuanzyuyan = ref(false)
const pduan = ref('')
const beishuzhi = ref<any>('')
const answer = ref('')
const answer1 = ref('')
const index1 = ref(0)
const index2 = ref(1)
const zhudon = ref(['中文', '英文', '日文'])
const beidon = ref(['中文', '英文', '日文'])
const beidon1 = ref(['中文', '英文', '日文'])
const web = ref<any>([])
const neiron = ref('')
const qiehuan = () => {
  console.log('触发了')

  beishuzhi.value = index1.value
  index1.value = index2.value
  index2.value = beishuzhi.value
}
const xuanzhe = (data) => {
  pduan.value = data
  xuanzyuyan.value = !xuanzyuyan.value
}
const xuanzhehao = (index3) => {
  console.log(index3)

  if (pduan.value == 'zhudon') index1.value = index3
  if (pduan.value == 'beidon') index2.value = index3
  xuanzyuyan.value = !xuanzyuyan.value
}
const uuid = () => {
  console.log('调用了 uuid')
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + S4()
}
const truncate = function (q) {
  console.log('调用了 truncate')
  const size = q.length
  if (size <= 20) {
    return q
  }
  return q.slice(0, 10) + size + q.slice(size - 10, size)
}

// 搜索结果
const search = async () => {
  console.log('触发了没有')

  const url = 'https://openapi.youdao.com/api'
  // 需要修改此处
  const appKey = '252bb1640d14eb99'
  // 需要修改此处
  const appSecret = 'X9FGNDf9qs7NvCAvKJ8DH1YFTkbVe3h4'
  const salt = uuid()
  var curtime = Math.round(new Date().getTime() / 1000)
  // 签名
  const signStr = appKey + truncate(neiron.value) + salt + curtime + appSecret
  const sign = SHA256.sha256_digest(signStr)
  console.log(salt, 'salt')
  console.log(curtime, '时间')
  console.log(signStr, '11111111111')
  console.log(sign, 'sign')
  const to = beidon.value[index2.value]
  let bianhuayuyan = 'en'
  console.log(to, '是什么语言')
  if (to == '中文') {
    bianhuayuyan = 'zh-CHS'
  } else if (to == '英文') {
    bianhuayuyan = 'en'
  } else if (to == '日文') {
    bianhuayuyan = 'ja'
  }
  const result = []
  // 访问有道智云API，获取识别结果
  uni.request({
    url: url,
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: {
      q: neiron.value,
      from: 'auto',
      to: bianhuayuyan,
      appKey: appKey,
      salt: salt,
      sign: sign,
      signType: 'v3',
      curtime: curtime,
    },
    success: async function (res: any) {
      console.log(res, '我看看')
      if (res.data.errorCode == '0' && res.data.translation.length > 0) {
        if (res.data.basic) {
          const rsp = res.data.basic.explains
          answer1.value = rsp
        }
        if (res.data.web) {
          const kuozhan = res.data.web
          web.value = kuozhan
        }

        answer.value = res.data.translation[0]
      } else {
        console.log(res, '错误了')
      }
    },
  })
}
</script>

<style scoped>
@import url('../../static/assets/wxss/iconfont.css');
/* 上面切换的翻译功能 */
.fuqin {
  height: 100rpx;
  display: flex;
  /* 垂直水平居中 */
  justify-content: center;
  align-content: center;
}
.ezi {
  height: 100%;
  width: 300rpx;
  /* 文本垂直居中 */
  display: flex;
  align-items: center;
  /* 水平间隔 */
  justify-content: space-between;
}
.qiehuanyans {
  /* 水平居中 */
  display: flex;
  justify-content: center;
  align-content: center;
  /* 换行 */
  flex-wrap: wrap;
  /* 方向垂直 */
  flex-direction: column;
  /* 上下间隔 50rpx */
}
.qiehuanyans .ziti {
  /* 字体好看 */
  font-size: 30rpx;
  margin: 20rpx;
  text-align: center;
  color: #333;
  border: 1px solid #ccc;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}
.fyi11 {
  /* 换行 */
  flex-wrap: wrap;
  /* 方向垂直 */
  display: flex;
  flex-direction: column;
  /* 上下间隔 50rpx */
}
.search11 {
  /* 在右下角 */
  position: relative;
  left: 630rpx;

  /* 使元素在垂直方向上居中 */
  align-items: center;
  /* 将这个图标变更好看 */
  font-size: 50rpx;
  color: #333;
}
.result-card {
  border-top: 20rpx solid #f2f2f2;
  padding: 30rpx;
}
.result-card .title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 50rpx;
}

.uniParse-p {
  font-size: 28rpx;
}

latex {
  width: auto !important;
}

.empty {
  width: 750rpx;
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.empty .text {
  margin-left: 15rpx;
  font-size: 32rpx;
  color: #333;
}
.wangyiquanyi {
  /*  */
  margin-left: 20rpx;
  /* 字体变好看 */
  font-size: 30rpx;
  color: #646262;
}
.quanbu {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.tuozzi {
  font-size: 30rpx;
  /* 水平字体居中 */
  text-align: center;
  /* 黑体加粗 */
  font-family: 'SimHei';
  font-weight: bold;
  /* 加字体阴影 ，好看 */
  text-shadow: 2px 2px 2px #646262;
}
</style>
